<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Excel 文件列表</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.5;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
        }

        h1 {
            margin-bottom: 20px;
            color: #1a1a1a;
            font-size: 24px;
        }

        .file-list {
            list-style: none;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s;
        }

        .file-item:hover {
            background-color: #f8f9fa;
        }

        .file-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            color: #1890ff;
        }

        .file-info {
            flex: 1;
        }

        .file-name {
            font-weight: 500;
            color: #1890ff;
            text-decoration: none;
            margin-bottom: 4px;
            display: block;
        }

        .file-name:hover {
            text-decoration: underline;
        }

        .file-meta {
            font-size: 12px;
            color: #666;
        }

        .file-actions {
            display: flex;
            gap: 8px;
        }

        .btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .btn-preview {
            background-color: #1890ff;
            color: white;
        }

        .btn-preview:hover {
            background-color: #40a9ff;
        }

        .btn-download {
            background-color: #52c41a;
            color: white;
        }

        .btn-download:hover {
            background-color: #73d13d;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .error {
            color: #ff4d4f;
            text-align: center;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .empty {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
        }

        .status-enabled {
            background-color: #52c41a;
            color: white;
        }

        .status-disabled {
            background-color: #ff4d4f;
            color: white;
        }

        .status-loading {
            background-color: #1890ff;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>
            Excel 文件列表
            <span id="previewStatus" class="status-badge status-loading">检查预览状态...</span>
        </h1>
        <div id="fileList" class="file-list">
            <div class="loading">正在加载文件列表...</div>
        </div>
    </div>

    <script>
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        // 获取文件列表
        async function fetchFileList() {
            try {
                const response = await fetch('/api/list-files');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                return data.files;
            } catch (error) {
                console.error('获取文件列表失败:', error);
                throw error;
            }
        }

        // 获取文档预览状态
        async function fetchPreviewStatus() {
            try {
                const response = await fetch('/api/doc-preview-status');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                return data.status;
            } catch (error) {
                console.error('获取预览状态失败:', error);
                return 'error';
            }
        }

        // 渲染文件列表
        function renderFileList(files) {
            const fileListElement = document.getElementById('fileList');
            
            if (!files || files.length === 0) {
                fileListElement.innerHTML = '<div class="empty">暂无文件</div>';
                return;
            }

            fileListElement.innerHTML = files.map(file => `
                <div class="file-item">
                    <svg class="file-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/>
                    </svg>
                    <div class="file-info">
                        <a href="${file.url}" class="file-name" target="_blank">${file.name}</a>
                        <div class="file-meta">
                            ${formatFileSize(file.size)} · ${formatDate(file.last_modified)}
                        </div>
                    </div>
                    <div class="file-actions">
                        <a href="${file.preview_url}" class="btn btn-preview" target="_blank">
                            预览
                        </a>
                        <a href="/static/preview.html?objectUrl=${encodeURIComponent(file.objectUrl)}&bucket=${encodeURIComponent(file.bucket)}&region=${encodeURIComponent(file.region)}&appId=${encodeURIComponent(file.app_id)}" class="btn btn-preview" target="_blank" style="background-color: #722ed1;">
                            高级预览
                        </a>
                        <a href="${file.url}" class="btn btn-download" download>
                            下载
                        </a>
                    </div>
                </div>
            `).join('');
        }

        // 更新预览状态显示
        async function updatePreviewStatus() {
            const statusElement = document.getElementById('previewStatus');
            const status = await fetchPreviewStatus();
            
            statusElement.className = 'status-badge';
            switch (status) {
                case 'enabled':
                    statusElement.textContent = '预览功能已开通';
                    statusElement.classList.add('status-enabled');
                    break;
                case 'disabled':
                    statusElement.textContent = '预览功能未开通';
                    statusElement.classList.add('status-disabled');
                    break;
                default:
                    statusElement.textContent = '预览状态未知';
                    statusElement.classList.add('status-disabled');
            }
        }

        // 页面加载完成后获取文件列表和预览状态
        window.onload = async function() {
            try {
                // 并行获取文件列表和预览状态
                const [files] = await Promise.all([
                    fetchFileList(),
                    updatePreviewStatus()
                ]);
                renderFileList(files);
            } catch (error) {
                document.getElementById('fileList').innerHTML = `
                    <div class="error">
                        加载文件列表失败，请稍后重试
                        <br>
                        <small>${error.message}</small>
                    </div>
                `;
            }
        };
    </script>
</body>
</html> 